<template>
	<view class="content-box">
		<view class="content-head">
			<text class="head-title">{{$t('index.title')}}</text>
			<text class="head-content">{{$t('index.tip')}}</text>
		</view>
		<view class="content-body" v-for="(item, index) in contentLists" :key="index">
			<image :style="`width: ${item.width}`" class="body-img" :src="item.img" mode="widthFix"></image>
			<text class="body-title">{{ item.title }}</text>
			<text class="body-content">{{ item.content }}</text>
		</view>
	</view>
</template>

<script>
	import firstImg from '@/static/first-img.png';
	import secondImg from '@/static/second-img.png';
	import thirdImg from '@/static/third-img.png';
	import fourthImg from '@/static/fourth-img.png';
	export default {
		data() {
			return {
				contentLists: [{
						img: firstImg,
						title: this.$t('index.first-title'),
						content: this.$t('index.first-tip'),
						width: '60%'
					},
					{
						img: secondImg,
						title: this.$t('index.second-title'),
						content: this.$t('index.second-tip'),
						width: '36%'
					},
					{
						img: thirdImg,
						title: this.$t('index.third-title'),
						content: this.$t('index.third-tip'),
						width: '45%'
					},
					{
						img: fourthImg,
						title: this.$t('index.fourth-title'),
						content: this.$t('index.fourth-tip'),
						width: '45%'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.content-box {
		padding: 10rpx 28rpx 0 28rpx;
		
		.content-head {
			display: flex;
			flex-direction: column;
			text-align: left;
			.head-title {
				font-size: 50rpx;
				font-weight: 500;
				margin-bottom: 10rpx;
			}
			
			.head-content {
				font-size: 28rpx;
				color: #d0cfd0;
			}
		}
		
		.content-body {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.body-img {
				margin: 80rpx 0;
			}
			
			.body-title {
				font-size: 48rpx;
				margin-bottom: 24rpx;
			}
			
			.body-content {
				font-size: 28rpx;
				text-indent: 12%;
			}
		}
	}
</style>
